<template>
    <div class="container">
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div class="ball" v-show="ballFlag" ref="ball"></div>
        </transition>
        <div class="card">
            <div class="swiper-box">
                <Swipe :autoplay="1500">
                    <SwipeItem v-for="item in imageList" :key="item.id">
                        <div class="swiper-item">
                            <img v-lazy="item.url" width="100%"/>
                        </div>
                    </SwipeItem>
                </Swipe>
            </div>
        </div>
        <div class="card">
            <div v-if="goodsInfo" class="goods-info">
                <div class="header">{{ goodsInfo.title }}</div>
                <div class="footer">
                    <div>
                        市场价：<span class="sell">￥{{ goodsInfo.market_price }}</span>
                        销售价：<span class="market">￥{{ goodsInfo.sell_price }}</span>
                    </div>
                    <p>购买数量：
                        <Stepper v-model="count" min="1" :max="goodsInfo.stock_quantity" disable-input/>
                    </p>
                    <div class="btn">
                        <Button type="info">立即购买</Button>
                        <Button type="danger" @click="addGoodsToShopCart">加入购物车</Button>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div v-if="goodsInfo" class="goods-info">
                <div class="header">商品参数</div>
                <div class="content">
                    <span>商品货号：{{ goodsInfo.goods_no }}</span>
                    <span>库存情况：{{ goodsInfo.stock_quantity }}</span>
                    <span>上架时间：{{ goodsInfo.add_time | dateFormat }}</span>
                </div>
                <div class="footer">
                    <Button type="info" plain block class="mt-10">图文介绍</Button>
                    <Button type="danger" plain block>商品评论</Button>
                </div>
            </div>
        </div>
        <div class="placeholder"></div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem, Lazyload, Stepper, Button } from 'vant';
import { getImageList, getGoodsInfo } from '../../services';

Vue.use(Lazyload);

export default {
    components: { Swipe, SwipeItem, Stepper, Button },
    data() {
        return {
            imageList: null,
            goodsInfo: null,
            count: 1,
            ballFlag: false,
        };
    },
    computed: {
        id() {
            return parseInt(this.$route.params.id);
        },
        goodsCountInCart() {
            return this.$store.getters['shopCart/getCount'](this.id);
        }
    },
    methods: {
        // 添加商品到购物测
        addGoodsToShopCart() {
            // 如果购物车中的数量和当前的数量相同，则不进行任何操作
            if (this.goodsCountInCart === this.count) return;
            this.ballFlag = !this.ballFlag;
            this.$store.commit('shopCart/add', {
                id: this.id,
                count: this.count,
                price: this.goodsInfo.sell_price,
                selected: true
            });
        },
        beforeEnter(el) {
            el.style.transform = 'translate(0, 0)';
        },
        enter(el, done) {
            el.offsetWidth;
            // 获取小球在页面中的位置
            const ballPosition = this.$refs.ball.getBoundingClientRect();
            // 获取徽标在页面中的位置
            const badgePosition = document.querySelector('#badge .van-info').getBoundingClientRect();
            // 计算移动的距离
            const moveX = badgePosition.left - ballPosition.left;
            const moveY = badgePosition.bottom - ballPosition.top;
            el.style.transform = `translate(${moveX}px, ${moveY}px)`;
            el.style.transition = 'all 0.6s cubic-bezier(.4,-0.3,1,.68)';
            done();
        },
        afterEnter() {
            this.ballFlag = !this.ballFlag;
        },
    },
    created() {
        getImageList(59176).then(imageList => this.imageList = imageList);
        getGoodsInfo(this.id).then(goodsInfo => this.goodsInfo = goodsInfo);
        if (this.goodsCountInCart > 0) {
            this.count = this.goodsCountInCart;
        }
    }
}
</script>

<style lang="less" scoped>
.container {
    min-height: calc(100vh - 46px - 50px);
    background-color: #eee;
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    padding-top: 10px;
    position: relative;
    .ball {
        width: 15px;
        height: 15px;
        background-color: red;
        border-radius: 50%;
        position: absolute;
        left: 144px;
        top: 322px;
        z-index: 2;
        opacity: 1;
    }
    .card {
        background-color: #fff;
        min-height: 200px;
        width: 100%;
        margin-bottom: 10px;
        box-sizing: border-box;
        border-radius: 5px;
        box-shadow: 0 1px 2px rgb(0 0 0 / 30%);
        overflow: hidden;
        .swiper-item {
            height: 200px;
        }
        .header {
            min-height: 44px;
            box-sizing: border-box;
            padding: 10px 15px;
            border-bottom: 1px solid #c8c7cc;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            font-size: 17px;
        }
        .content {
            display: flex;
            flex-direction: column;
            padding: 15px 15px;
            border-bottom: 1px solid #c8c7cc;
            color: #999;
            span {
                padding: 5px 0;
            }
        }
        .footer {
            padding: 15px;
            p {
                display: flex;
            }
            button {
                margin-right: 15px;
                border-radius: 5px;
                &.mt-10 {
                    margin-bottom: 10px;
                }
            }
            .sell {
                text-decoration: line-through;
                margin-right: 20px;
            }
            .market {
                color: red;
                font-weight: bold;
            }
        }
    }
    .placeholder {
        height: 1px;
    }
}
</style>